<template>
	<!--pages/mycoupon/mycoupon.wxml-->
	<view class="mcoupon">
		<view class="nocoupon">
			<view :class="'nav' + (actIndex==1?' active':'')" @tap="changeIndex" data-index="1">可用券</view>
			<view :class="'nav' + (actIndex==2?' active':'')" @tap="changeIndex" data-index="2">已使用</view>
			<view :class="'nav' + (actIndex==3?' active':'')" @tap="changeIndex" data-index="3">已过期</view>
		</view>
		<scroll-view class="couponBgbox" scroll-y="true" :lower-threshold="lowerNum" @scrolltoupper="loadNew"
			@scrolltolower="loadMore">
			<block v-for="(item, index) in allCoupon[actIndex-1].data" :key="index" :for-id="index">
				<view class="couponBg" @tap.stop="toDetails" :data-id="item.id">
					<image class="couponBg-image" :src="allCoupon[actIndex-1].img"></image>
					<image class="couponBg-tip-img" v-if="allCoupon[actIndex-1].tipImg"
						:src="allCoupon[actIndex-1].tipImg"></image>
					<view class="couponBox">
						<view class="left">
							<text>￥</text>
							<text>{{item.reducemoney}}</text>
						</view>
						<view class="right">
							<view class="title">{{item.coupon_name}}</view>
							<view class="cooupon-mj">
								<text>满{{item.needmoney}}元减使用</text>
							</view>
							<view v-if="actIndex==1" class="stage">{{item.time}}</view>
							<view v-if="actIndex==2" class="stage">使用时间: {{item.time}}</view>
							<view v-if="actIndex==3" class="stage">过期时间: {{item.time}}</view>
						</view>
					</view>
				</view>
			</block>
			<view class="loading">
				<block v-if="isLoading">
					<image src="https://mall.xzthealth.com/loading2.gif"></image>
					<text>加载中</text>
				</block>
				<block v-else-if="allCoupon[actIndex-1].canLoad">
					<text>下拉加载更多</text>
				</block>
			</view>
			<view class="kong"
				v-if="!allCoupon[actIndex-1].canLoad&&!isLoading&&(!allCoupon[actIndex-1].data||!allCoupon[actIndex-1].data.length)">
				暂无优惠券</view>
			<view class="kong"
				v-if="allCoupon[actIndex-1].data&&allCoupon[actIndex-1].data.length&&!allCoupon[actIndex-1].canLoad&&!isLoading">
				已显示全部</view>
		</scroll-view>
	</view>
</template>

<script>
	// pages/Coupon/Coupon.js
	var app = getApp().globalData;

	export default {
		data() {
			return {
				actIndex: 1,
				allCoupon: [{
					page: 0,
					data: [],
					canLoad: true,
					img: "/static/images/coupon-1.png"
				}, {
					page: 0,
					data: [],
					canLoad: true,
					img: "/static/images/coupon-2.png",
					tipImg: "/static/images/coupon-3.png"
				}, {
					page: 0,
					data: [],
					canLoad: true,
					img: "/static/images/coupon-2.png",
					tipImg: "https://www.xzthealth.com/Public/MallSmallApp/coupon-4.png"
				}],
				couponData: [],
				lowerNum: 50,
				isLoading: false
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.getCouponData();
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		methods: {
			// 切换优惠券状态
			changeIndex: function(e) {
				// console.log(e);
				var index = e.currentTarget.dataset.index;
				var that = this;
				this.setData({
					actIndex: index
				});

				if (!this.allCoupon[index - 1].data.length) {
					this.getCouponData();
				}
			},
			getCouponData: function() {
				var that = this; //优惠券

				var allCoupon = that.allCoupon;
				console.log(allCoupon)
				var actIndex = that.actIndex;
				var page = parseInt(allCoupon[actIndex - 1].page) + 1;
				console.log(page)
				if (!allCoupon[actIndex - 1].canLoad) {
					return;
				}

				allCoupon[actIndex - 1].canLoad = false;
				this.setData({
					allCoupon: allCoupon,
					isLoading: true
				});
				getApp().globalData.sendRequest({
					url: '/Vip/getCouponData_v1',
					type: "post",
					showLoading: false,
					data: {
						use_type: actIndex,
						page: page
					},
					success: function(res) {
						if (res.status == 1) {
							var couponData = allCoupon[actIndex - 1].data;

							if (page == 1) {
								couponData = res.data;
							} else {
								couponData.push.apply(couponData, res.data);
							}

							allCoupon[actIndex - 1].page = page;
							allCoupon[actIndex - 1].canLoad = res.data.length < res.limit ? false : true;
							allCoupon[actIndex - 1].data = couponData;
							that.setData({
								allCoupon: allCoupon,
								isLoading: false
							});
						} else {
							uni.showModal({
								title: '提示',
								content: res.msg,
								showCancel: false,
								confirmColor: '#ff5c6d'
							});
						}
					}
				});
			},
			toDetails: function(e) {
				var id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '../Mcoupondetail/Mcoupondetail?id=' + id
				});
			},
			loadNew: function() {
				var actIndex = this.actIndex;
				var allCoupon = this.allCoupon;
				allCoupon[actIndex - 1].canLoad = true;
				allCoupon[actIndex - 1].page = 0;
				this.setData({
					allCoupon: allCoupon
				});
				this.getCouponData();
			},
			loadMore: function() {

				this.getCouponData();
				console.log('sssss')
			}
		}
	};
</script>
<style>
	@import "./Mcoupon.css";
</style>
